<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width-device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="sie-edge" />
<link rel="stylesheet" type="text/css" href="LoginCss/css/style.css">

<title>登录注册页面</title>

<!--图标库-->
<script src="https://unpkg.com/ionicons@4.2.2/dist/ionicons.js"></script>
</head>

<body>
<div class="container" id="container"> 
  <div class="form-container sign-up-container">
    <form action="#",method="post" >
      <h1>JCP停车场会员注册</h1>
      <input type="text"  id="phoneNumber2"  name="phoneNumber" placeholder="请输入手机号码">
      <input type="text"  id="carNumber" name="carNumber" placeholder="请输入车牌号码">
      <input type="text"  id="userName" name="userName" placeholder="请输入姓名">
      <input type="text"  id="carModel" name="carModel" placeholder="请输入车辆型号">
      <input type="text"  id="carColor" name="carColor" placeholder="请输入车辆颜色">
      <input type="password"  id="password2"  name="password" placeholder="请输入密码">
      <input type="button" id="zhuce" class="button" value="注册"/>
    </form>
  </div>
  <div class="form-container sign-in-container">
    <form  action="login",method="post">
      <h1>JCP停车场登录</h1>	
      <input type="text" required="true" id="phoneNumber" name="phoneNumber" placeholder="手机号码">
      <input type="password" required="true" id="password" name="password" placeholder="密码">
   	 <input type="hidden" id="hidden" value="${user.userName}">
   	 
   	 <input type="button" id="button" class="button" value="登录"/>
   	 

    </form>
  </div>
  <div class="overlay-container">
    <div class="overlay">
      <div class="overlay-panel overlay-left">
        <h1>欢迎回来JCP停车场登入</h1>
        <p>请登录您的个人信息</p>
        <button class="ghost" id="signIn">登录</button>
      </div>
      <div class="overlay-panel overlay-right">
        <h1>欢迎光临</h1>
        <p>输入您的个人资料，并与我们一起开始智慧停车</p>
        <button class="ghost" id="signUp">注册</button>
      </div>
    </div>
  </div>
</div>
 
<script  src="LoginCss/js/script.js"></script> 
<!-- 提示框 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	
			$("#button").click(function(){
		    	var phoneNumber = $("#phoneNumber").val();    //用户名
		    	var password = $("#password").val();      //密码
		    	if(phoneNumber==""||password==""){
		    		alert("请填写完整信息")
		    		window.location = "Login.jsp"
		    	}else{
			    $.ajax({  
	                type: "post",  
	                async:true,
	                data:{phoneNumber:phoneNumber,password:password},
	                dataType:"text",
	                url : "login",
	                success: function (data) { 
	                	if(data=="登录失败"){
	                		alert("手机号和密码错误请重新登录");
	                		window.location = "Login.jsp"
	                	}
	                	else if(data=="管理员登录"){
	                		alert("欢迎观临管理员admin");
	                		window.location = "index.jsp"
	                	}else if(data=="登录成功"){
	                		var username=$("#hidden").val();
	                		alert("username : "+username)
	                		alert("欢迎光临"+username)
	                		window.location="PaySystem.jsp"
	                	}
	              	}   
	           	});
				}
			})
			$("#zhuce").click(function(){
				var phone = "^[1][3,4,5,7,8][0-9]{9}$";//手机号码的正则
				var pass="^(\\w){6,20}$"//密码正则
				var re = new RegExp(phone);//创建手机号码正则对象
				var re1 = new RegExp(pass);//创建密码正则对象
				var phoneNumber = $("#phoneNumber2").val();    //用户名
		    	var password = $("#password2").val();      //密码
		    	var carNumber = $("#carNumber").val();      //车牌号
		    	var userName = $("#userName").val();      //用户姓名
		    	var carModel = $("#carModel").val();      //车辆类型
		    	var carColor = $("#carColor").val();      //车颜色
		    	if(phoneNumber==""||password==""||carNumber==""||userName==""||carModel==""||carColor==""){
		    		alert("请填写完整信息")
		    		window.location = "Login.jsp"
		    	}else if(!(re.test(phoneNumber))){
		    		alert("手机格式不对")
		    		window.location = "Login.jsp"
		    	}else if(!(re1.test(password))){
		    		alert("密码格式不对请重新注册")
		    		window.location = "Login.jsp"
		    	}else{
			    $.ajax({  
	                type: "post",  
	                async:true,
	                data:{phoneNumber:phoneNumber,password:password,
	                	carNumber:carNumber,userName:userName,carModel:carModel,
	                	carColor:carColor},
	                dataType:"text",
	                url : "ZhuChe",
	                success: function (data) { 
	                	if(data=="注册失败"){
	                		alert("车牌号或者手机号已被注册请重新注册");
	                		window.location = "Login.jsp"
	                	}
	                	if(data=="注册成功"){
	                		alert("注册成功,返回登录界面");
	                		window.location = "Login.jsp"
	                	}
	              	}   
	           	});
		    	}
			})
	</script>	
</body>
</html>
